<template>
  <view class="tabbar">
    <slot></slot>
  </view>
</template>

<script>
export default {
  name: "ty-tab",
  props: {
    tabIndex: Number
  },
  mounted() {
    this.$children[this.tabIndex].active = true;
    function change(index) {
      this.$children.forEach(ele => {
        ele.active = false;
      })
      this.$emit("update:tabIndex", index);
    }
    this.$children.forEach((ele,index) => {
      ele.index = index;
      ele.change = change.bind(this);
    })
  }
};
</script>

<style scoped>
.tabbar {
  display: flex;
  width: 100%;
  background: white;
  height: 158rpx;
}
</style>